<template>
    <div class="full-bg a-r" :style="{ backgroundImage: `url(${getImage(backImage)})` }">
        <div :class="['full-bg-content', 'body-m', className]">
            <slot />
        </div>
    </div>
</template>

<script setup lang="ts" name="name">

const { backImage, className } = defineProps<{ backImage: string, className?: string }>()

</script>

<style scoped>
.a-r {
    max-height: calc(100vh - var(--nav-height));
    aspect-ratio: 16/9;
    padding: 2rem 0;

    display: flex;
    align-items: center;
}

.full-bg-content {
    display: flex;
    width: 100%;
    gap: 1rem;
    flex-direction: column;
    align-items: flex-start;
}
</style>